<template>
    <div class="wrapper" ref="tradeWrapper">
        <div v-if="!loadCompolete">
            <page-loading :loadTxt="$t('form.loading')"></page-loading>
        </div>
        <div v-else class="trade-list">
            <div class="no-list-record" v-if="tradeList.length==0 && loadCompolete">
                <img src="./images/no.png" alt="">
                <p>{{$t('trade.noRecord')}}</p>
            </div>
            <ul class="table-list" v-else>
                <li>
                    <span>{{$t('trade.tradeTime')}}</span>
                    <span>{{$t('trade.type')}}</span>
                    <span>{{$t('wallet.from')}}</span>
                    <span>{{$t('wallet.to')}}</span>
                    <span>{{$t('wallet.amount')}}(dlb)</span>
                    <span>{{$t('trade.tradeStatus')}}</span>
                </li>
                <li v-for="(item,index) in tradeList" :key="index" @click="checkDetail(item)">
                    <span>{{item.timestamp | FormatDate}}</span>
                    <span>{{item.type | tradeType}}</span>
                    <span><i class="address"></i>{{item.senderPublicKey}}</span>
                    <span><i class="address"></i>{{item.asset}}</span>
                    <span>{{item.amount}}</span>
                    <span>{{$t('trade.finished')}}</span>
                </li>
            </ul>
            <div class="table-pagination" v-show="pages>=1">
                <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import pageLoading from '@/components/loading/pageLoading';
import { getAccountInfo } from '../../createAccount'
export default {
    name: "trade",
    components:{
        pageLoading
    },
    data() {
        return{
            total: 0,
            currentPage:1,
            pageSize:4,
            pages: 0,
            tradeList: [],
            wallet: [],
            loadCompolete:false
        }
    },
    activated(){
        this.reset()
        
        this.pageSize = Math.floor((this.$refs.tradeWrapper.offsetHeight-50-70)/70)
        this.getList()
        
        var that = this
        window.onresize = () => {
            return (() => {
                that.currentPage = 1;
                that.pageSize = Math.floor((that.$refs.tradeWrapper.offsetHeight-50-70)/70)
                that.getList()
            })()
        }
    },
    methods:{
        ...mapActions(['updatePageLoading']),
        reset(){
            this.total = 0;
            this.currentPage = 1;
            this.pageSize = 4;
            this.pages = 0;
            this.tradeList = [];
            this.wallet = [];
            this.loadCompolete = false;
        },
        handleCurrentChange(val){
            this.currentPage = val;
            this.getList()
        },
        checkDetail(item){
            this.$router.push({
                path:'/trade-detail',
                query:{
                    type: item.type,
                    timestamp: item.timestamp,
                    hash: item.hash,
                    senderPublicKey: item.senderPublicKey,
                    asset: item.asset,
                    amount: item.amount
                }
            })
        },
        getList(){
            this.loadCompolete = false
            this.updatePageLoading(true)
            getAccountInfo(this.$route.query.publicKey,this.currentPage,this.pageSize,(resp)=>{
                // console.log(resp)
                this.updatePageLoading(false);
                if(resp.code == 200){
                    this.wallet = resp.data
                    this.$emit('sendData',resp.data)
                    if(this.wallet.numberOfTransactions>0){
                        // 数组存在至少一条数据
                        this.tradeList = this.wallet.transactions
                        this.total =  this.wallet.numberOfTransactions
                        this.currentPage = this.wallet.currentPages
                        this.pages = this.wallet.totalPages;
                    }else{
                        this.tradeList = []
                        this.total =  0
                        this.currentPage = 1
                        this.pages = 0;
                    }
                }else{
                    
                }
                this.loadCompolete = true
            })
        },
        parentHandleclick(){
            this.currentPage = 1;
            this.getList();
        }
    }
}
</script>

<style lang="less" scoped>
.wrapper{
    height:100%;
    .trade-list{
        height: 100%;
        background: #FFFFFF;
        border-radius: 4px;
        position:relative;
        .no-list-record {
            img{
                margin:50px auto 30px;
            }
            p{
                color:#666;
                text-align:center;
            }
        }
        .table-list{
            width:100%;
            height: 100%;
            padding-bottom:70px;
            overflow-y: auto;
            overflow-x: hidden;
            position:relative;
            li{
                font-size:12px;
                color:#1A1A1A;
                display:flex;
                height:70px;
                line-height:70px;
                cursor: pointer;
                span{
                    display:inline-block;
                    margin: 0 10px;
                    text-align:center;
                    &:nth-child(1){
                        width:130px;
                    }
                    &:nth-child(2){
                        width:50px;
                    }
                    &:nth-child(3){
                        flex:1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        .address{
                            padding-left:18.2px;
                            background:url("./images/icon-positioning.png") no-repeat left center;
                        }
                    }
                    &:nth-child(4){
                        flex:1;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        .address{
                            padding-left:18.2px;
                            background:url("./images/icon-positioning.png") no-repeat left center;
                        }
                    }
                    &:nth-child(5){
                        width:70px;
                    }
                    &:nth-child(6){
                        width:75px;
                    }
                }
                &:first-child{
                    height:50px;
                    line-height:50px;
                    background:#F2F2FF;
                }
                &:hover{
                    background:#f5f7fa;
                }
            }
        }
        .table-pagination{
            text-align:center;
            position:absolute;
            bottom:0;
            width:100%;
            padding:20px 0;
            text-align: center;
            background: #fff;
        }
    }
}
</style>